<template>
  <div class="my-pseudo-3d">
    <div class="box">
      <img class="box-bg" src="@/assets/img/logo.png">
      <img v-for="n in 50" :key="n" class="logo" :style="{transform: `rotateX(-90deg) translateY(-300px) translateZ(${n}px)`}" src="@/assets/img/222.png">
      <div class="pie" style="color: rgba(58, 0, 56, 0.5);box-shadow: 0 0 100px rgba(0,0,0,.5) inset;line-height: 790px;">3D</div>
      <div class="pie" style="border: 100px solid rgba(255,255,255,.3);color: rgb(255, 0, 242);transform: translateZ(51px);">
        <span>3D</span>
      </div>
      <div v-for="n in 50" :key="n" class="pie pie-1" :style="{transform:`translateZ(${n}px)`}">3D</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pseudo3D",
  describe: "伪3D",
  path: "/pseudo3d",
}
</script>

<style lang="scss">
.my-pseudo-3d{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 40px;
  background-color: #03081E;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective-origin: center center;
  perspective: 2000px;
  position: relative;
  .box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6);
    background-color: rgba(0,0,0,.1);
    box-shadow: 0 0 80px rgba(15, 246, 254, 0.4) inset;
    position: relative;
    transform-origin: center center;
    transform: rotateX(70deg) rotateZ(0);
    animation: my-pseudo-3d-animation 20s linear infinite;
    transform-style: preserve-3d;
    perspective-origin: center center;
    &-bg{
      display: block;
      width: 1000px;
      height: 1000px;
      border-radius: 50%;
    }
  }
  .logo{
    display: block;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    filter: drop-shadow(0 0 2px rgba(#000, .1));
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: rotateX(-90deg) translateY(-300px);
  }
  .pie{
    width: 600px;
    height: 600px;
    border-radius: 50%;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.1) inset;
    position: absolute;
    top: 200px;
    left: 200px;
    transform-style: preserve-3d;
    perspective-origin: center center;
    font-size: 100px;
    text-align: center;
    line-height: 590px;
    &-1{
      border-top: 100px solid rgb(36, 203, 209);
      border-left: 100px solid rgb(16, 185, 16);
      border-right: 100px solid rgb(255, 240, 102);
      border-bottom: 100px solid #a00;
      box-shadow: 0 0 2px 0 rgba(0,0,0,.1),
      0 0 2px 0 rgba(0,0,0,.1) inset;
      color: rgba(121, 0, 117, 0.01);
    }
  }
}
@keyframes my-pseudo-3d-animation {
  from {
    transform: rotateX(60deg) rotateZ(0);
  }
  to {
    transform: rotateX(60deg) rotateZ(360deg);
  }
}
</style>